<template>
  <view class="list-item" @click="toOrder">
    <!-- 头部信息(商户名称，订单状态) -->
    <orderHeader
      :orderitem="orderitem"
      :status="status"
    ></orderHeader>

    <!-- 商品详情组件(单商品，多商品) -->
    <goodsDetail :orderitem="orderitem"></goodsDetail>

    <!-- 订单底部按钮组及价格 -->
    <orderOperate
      :orderitem="orderitem"
      @handleConfirm="handleConfirm"
      @handleCancle="handleCancle"
      :status="status"
    ></orderOperate>

  </view>
</template>

<script>
import orderHeader from "./order-item-header.vue";
import goodsDetail from "../order-list/components/goods-detail.vue";
import orderOperate from "./order-operate.vue";

export default {
  components: {
    orderHeader,
    goodsDetail,
    orderOperate,
  },
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    orderindex: {
        type: String,
        default: '0'
    },
    status: {
        type: Number,
        default: 0
    }
  },
  methods: {
    handleConfirm(e) {
      this.$emit("handleConfirm", e);
    },
    handleCancle(e) {
      this.$emit("handleCancle", e);
    },
    toOrder() {
        this.$emit("toOrder", this.orderitem)
    }
  },
};
</script>

<style  lang="scss" scoped>
.list-item {
  margin-top: 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 36rpx;

  .list-item-bottom {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .list-item-bottom-list {
      display: flex;
      justify-content: flex-end;

      view {
        width: 152rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        margin-left: 22rpx;
        font-size: 26rpx;
        border-radius: 30rpx;
      }

      navigator {
        width: 152rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        margin-left: 22rpx;
        font-size: 26rpx;
        border-radius: 30rpx;
      }

      .item-bottom-list-one {
        border: 1rpx solid #8e8e8e;
        color: #262626;
      }

      .item-bottom-list-two {
        color: #f22a10;
        border: 1rpx solid #f22a10;
      }
    }
  }
}

.list-item:last-child {
  margin-bottom: 20rpx;
}
</style>
